<!--运力发布-->
<template>
  <div class="driver">
    <div class="form">
      <el-form ref="form" :model="form" :rules="rule" label-width="auto" :inline="true" size="mini">

        <el-form-item prop="wdcTime" label="日期：">
          <el-date-picker type="date" v-model="form.wdcTime" clearable value-format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
        <el-form-item prop="trkType" label="车型：">
          <el-select v-model="form.trkType" clearable>
            <el-option v-for="(item,index) in car" :key="index" :value="item.rvLowValue" :label="item.rvCmeaning">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="trkNo" label="车牌号：">
          <el-input v-model="form.trkNo" clearable></el-input>
        </el-form-item>
        <el-form-item prop="" label="">
          <el-button type="primary" size="mini" @click="search">查 询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="btn">
      <buttonName @clickEvent="clickEventDom"></buttonName>
      <!-- <el-button plain size="mini" type="primary" v-if="isAuth('allF')" @click="all">全部发布</el-button>
      <el-button plain size="mini" type="primary" v-if="isAuth('add')" @click="add">新增</el-button>
      <el-button plain size="mini" type="primary" v-if="isAuth('save')" @click="editsave">保存</el-button>
      <el-button plain size="mini" type="primary" v-if="isAuth('del')" @click="del">删除</el-button> -->
    </div>
    <div class="table" ref="inner">
      <el-table :data="tableData" border
                :height="maxHeight"
                class="charge"
                :header-cell-style="{ textAlign: 'center' }"
                highlight-current-row
                @row-click="rowClick"
                @row-dblclick="dbrowClick"
      >
        <el-table-column :index="indexMethod" type="index" align="center" label="序号" width="50"></el-table-column>
        <el-table-column align="center" prop="wdcTime" label="日期" show-overflow-tooltip min-width="200"
                         sortable></el-table-column>
        <el-table-column align="center" prop="trkNo" label="车牌号" show-overflow-tooltip min-width="150"
                         ></el-table-column>
        <el-table-column align="center" prop="trkTonnage" label="载重吨" show-overflow-tooltip min-width="150"
                         ></el-table-column>
        <el-table-column align="center" prop="formTrkTypeName" label="车型" show-overflow-tooltip min-width="200"
                         ></el-table-column>                 
        <el-table-column align="left" prop="132" label="司机" show-overflow-tooltip min-width="180" >
          <template slot-scope="scope">
            <el-select  @change="changeA(item,$event)" v-model="scope.row.dvrName" size="mini" :disabled="!(tag===scope.row.wdcId)">
              <el-option v-for="(item,index) in driver" :key="index" :value="item.uuid"
                         :label="item.dvrName">
                         </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="drvIdcard" label="司机身份证号" show-overflow-tooltip min-width="200"
                         ></el-table-column>
        <el-table-column align="center" prop="drvCtctel" label="司机电话" show-overflow-tooltip min-width="200"
                         ></el-table-column>
        <el-table-column align="center" prop="wdcInsertdt" label="创建时间" show-overflow-tooltip min-width="200"
                         sortable></el-table-column>
        <el-table-column align="center" prop="wdcInsertuser" label="创建员工" show-overflow-tooltip min-width="150"
                         ></el-table-column>
        <el-table-column align="center" prop="wdcLstupddt" label="最后修改时间" show-overflow-tooltip min-width="200"
                         sortable></el-table-column>
        <el-table-column align="center" prop="wdcLstupduser" label="最后修改员工" show-overflow-tooltip min-width="150"
                         ></el-table-column>
      </el-table>
    </div>
    <div class="pages">
      <el-pagination
        ref="pagination"
        small
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="Pagination.currentPage"
        :page-sizes="Pagination.pageSizeList"
        :page-size="Pagination.pageSize"
        :layout="Pagination.layout"
        :total="Pagination.total">
      </el-pagination>
    </div>
    <!-- 对话框 新增 编辑 -->
    <el-dialog
      :title="name"
      width="35%"
      :visible.sync="openDialog"
      v-if="openDialog"
      v-el-drag-dialog
      :before-close="close"
      :close-on-click-modal="false"
     >
      <el-form :model="dialogForm" size="mini" :rules="dialogRule" ref="dialogForm" label-width="auto">
        <el-row :gutter="20">

          <el-form-item prop="wdcTime" label="日期：">
            <el-col :span="20">
              <el-date-picker type="date" v-model="dialogForm.wdcTime" style="width:90%" value-format="yyyy-MM-dd"
                              clearable :disabled="see"></el-date-picker>
            </el-col>
          </el-form-item>

        </el-row>
        <el-row :gutter="20">
          <el-form-item prop="trkNo" label="车牌号：">
            <el-col :span="20">
              <!-- <el-input type="text" v-model="dialogForm.trkNo" style="width:90%"></el-input>  @change="((val)=>{cheliang(val,index)})" @blur="blur($event)" -->
              <el-select v-model="dialogForm.trkNo"  @change="((val)=>{cheliang(val,index)})" allow-create default-first-option filterable style="width:90%">
                <el-option v-for="(item,index) in carNum" :key="index" :value="item.trkNo"
                           :label="item.trkNo"></el-option>
              </el-select>
            </el-col>
          </el-form-item>
        </el-row>
        <el-row :gutter="20">
          <el-form-item prop="trkTonnage" label="载重吨：">
            <el-col :span="20">
              <el-input type="text" v-model="dialogForm.trkTonnage" clearable style="width:90%"></el-input>
            </el-col>
          </el-form-item>
        </el-row>
        <el-row :gutter="20">
          <el-form-item prop="wdcDvrId" label="司机：">
            <el-col :span="20">
              <el-select  v-model="dialogForm.wdcDvrId" @change="((val)=>{siji(val,index)})" allow-create default-first-option filterable style="width:90%">
                <el-option v-for="(item,index) in driver" :key="index" :value="item.uuid"
                           :label="item.dvrName" ></el-option>
              </el-select>
            </el-col>
          </el-form-item>
        </el-row>
        <el-row :gutter="20">
          <el-form-item prop="drvCtctel" label="联系电话：">
            <el-col :span="20">
              <el-input type="text" v-model="dialogForm.drvCtctel" clearable value="dasdas" style="width:90%"></el-input>
            </el-col>
          </el-form-item>
        </el-row>
        <el-row :gutter="20">
          <el-form-item prop="drvIdcard" label="身份证号：">
            <el-col :span="20">
              <el-input type="text" v-model="dialogForm.drvIdcard"  clearable style="width:90%"></el-input>
            </el-col>
          </el-form-item>
        </el-row>
        <el-row :gutter="20">
          <el-form-item prop="wdcRemark" label="备注：">
            <el-col :span="20">
              <el-input type="textarea" v-model="dialogForm.wdcRemark" :rows="2" style="width:90%"></el-input>
            </el-col>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close" size="mini">关闭</el-button>
        <el-button type="primary" @click="save" v-if="!see" size="mini">保存</el-button>
      </div>
    </el-dialog>
    <!-- 全部发布弹出框 -->
    <el-dialog
      :title="name2"
      width="50%"
      
      :visible.sync="openDialog2"
      v-if="openDialog2"
      v-el-drag-dialog
      :before-close="close"
      :close-on-click-modal="false"
     >
      <!-- <el-transfer v-model="truckNos2" :data="truckNos"></el-transfer> -->
      <div style="text-align: center" width="40">
        <el-transfer
          style="text-align: left; display: inline-block"
          v-model="truckNos2"
          filterable
          
          
          :titles="['全部车次', '出勤车次']"
          :button-texts="['到左边', '到右边']"
          :format="{
            noChecked: '${total}',
            hasChecked: '${checked}/${total}'
          }"
          @change="handleChange"
          :data="truckNos">
          <!-- <el-button class="transfer-footer" slot="left-footer" size="small">操作</el-button>
          <el-button class="transfer-footer" slot="right-footer" size="small">操作</el-button> -->
        </el-transfer>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close" size="mini">取消</el-button>
        <el-button type="primary" @click="all2" size="mini">发布</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import paginationMixin from '@/mixins/pagination'
import resizeMixin from '@/mixins/resize'
import isAuth from '@/mixins/buttonAuth'
import scrollChange from '@/utils/onscroll.js'
import buttonName from '@/components/buttonName/button-name.vue'
import {
  addOrEditTmAttendancecar, getTmAttendanceListA, getRefCodesByType, getDriverModelList, getVehicleModelList,
  addAllTmAttendancecar, delTmAttendancecar,addAttendancecar,selectAllTruck
} from '@/request/api'

export default {
  name: 'router.capacityIssue',
  mixins: [paginationMixin, resizeMixin,isAuth],
  data() {
    return {
      date: '',
      typeId:[],
      form: {
        wdcTime: '',
        trkNo: '',
        trkType: ''
      },
      rule: {
        wdcTime: [{required: true, message: '请选择发布日期', trigger: 'blur'}]
      },
      tag: '',
      driver: [],//司机
      carNum: [],//车牌
      car: [{code: '1', name: '中型货车'}],//车型下拉框
      maxHeight: -1,
      currentData: {},
      rowdata:{},
      issuse: '',
      list: [{code: 'tx', name: '头像'}, {code: 'sfzz', name: '身份证正面'}, {code: 'sfzb', name: '身份证反面'}, {
        code: 'jsz',
        name: '驾驶证'
      }],
      // 对话框
      name: '',
      name2: '',
      trucks: [],
      truckNos: [],
      truckNos2: [],
      truckNos3: [],
      openDialog: false,
      openDialog2: false,
      dialogForm: {
        
      },
      dialogRule: {
        wdcTime: [{required: true, message: '请输入日期', trigger: 'blur'}],
        trkNo: [{required: true, message: '请输入车牌号', trigger: 'blur'}],
        wdcDvrId: [{required: true, message: '请输入司机名称', trigger: 'blur'}],
        trkTonnage: [{required: true, message: '请输入载重吨', trigger: 'blur'},{pattern: /^[1-9]\d*$/,message:'只能输入数字' }],
        drvCtctel: [{required: true, message: '请输入手机号', trigger: 'blur'},{pattern: /^1[3456789]\d{9}$/,message:'请正确输入手机号' }],
        drvIdcard: [{required: true, message: '请输入身份证号', trigger: 'blur'},{pattern: /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,message:'请正确输入身份证号' }]
      },
      edit: false,// 编辑模式
      see: false,//查看模式
      tableData: []
    }
  },
  created() {
    this.resize = () => {
      this.maxHeight = this.$refs.inner.offsetHeight
    }
  },
  components: {
    buttonName
  },
  mounted() {
    this.getdatatime()
    this.refreshList()
    this.selectAllTrucks()
    getRefCodesByType('车型_网络').then(res => {
      if (res.success === '1') {
        this.car = res.data

      }
    })
    let demandWrapper2=document.querySelector(".charge .el-table__body-wrapper");
    // 新增滚动条监听事件
    scrollChange(demandWrapper2);
    //司机
    getDriverModelList({
      dvrName: '',
      PageIndexs: '',
      PageSizes: '',
    }).then(res => {
      if (res.success === '1') {
        this.driver = res.data
      }
    })
    getVehicleModelList({
      dvrName: '',
      PageIndexs: '',
      PageSizes: ''
    }).then(res => {
      this.carNum = res.data
    })
  },
  methods: {
    search() {
      this.refreshList()
      this.tag = ''
      this.currentData = {}
    },
    selectAllTrucks(){
      this.truckNos = []
      this.truckNos2 = []
      this.carNum = []
      selectAllTruck({}).then(res =>{
        this.trucks = res.data
        this.carNum = res.data
        this.trucks.forEach((item, index) =>{
          this.truckNos.push({
            key: item.uuid,
            label: item.trkNo,
            disabled: false
            })
        })
      })
    },
    indexMethod (index) {
      return 1 + index + (Number(this.Pagination.currentPage) - 1) * Number(this.Pagination.pageSize)
    },
    getList(currentPage, pageSize, updateTotal) {
      getTmAttendanceListA({
        wdcTime: this.form.wdcTime,
        trkType: this.form.trkType,
        trkNo: this.form.trkNo,
        PageIndex: this.Pagination.currentPage.toString(),
        PageSize: this.Pagination.pageSize.toString()
      }).then(response => {
        this.tableData = response.data
        if (this.tableData.length > 0) {
          this.tableData.forEach((item, index) => {
            this.tableData[index]['wdcDvrId'] = item.wdcDvrId
          })
          // console.log(this.tableData)
        }
        updateTotal(Number(response.total))
        this.truckNos = this.truckNos3
        this.truckNos2 = []
      })
    },
    formmate(str) {
      const date = new Date(str)
      const year = date.getFullYear()
      const month = date.getMonth() + 1
      const day = date.getDate()
      return `${year}-${month}-${day}`
    },
    getdatatime() {//默认显示今天

      // this.date=`${year}-${month}-${day}`
      var time = new Date()
      this.form.wdcTime = this.formmate(time)
      this.dialogForm.wdcTime = this.formmate(time)
    },
    //单击行
    rowClick(row) {
      this.typeId = []
      this.rowdata = row
      this.currentData = row
      if(row.wdcIsuse === 'N'){
      this.tag = row.wdcId
      }
    },
    changeA(item,$event){
      this.typeId = $event
    },
    //删除
    del() {
      if (Object.keys(this.currentData).length === 0) {
        this.$alert('请选择需要删除的运力', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      this.$confirm('确定要删除该运力吗？', '提示', {
        confirmButtonText: '确定'
      }).then(() => {
        this.form.wdcTime = this.formmate(this.currentData.wdcTime)
        delTmAttendancecar({
          wdcTime: this.form.wdcTime,
          wdcTrkId: this.currentData.wdcTrkId
        }).then(res => {
          if (res.success === '1') {
            this.$message({
              type: 'success',
              message: '删除成功！',
              showClose: true
            })
            this.close()
            this. getdatatime()
            this.refreshList()
          }
        })
      })
    },
    //保存
    save() {
      this.$refs.dialogForm.validate(valid => {
        if (valid) {
          //this.dialogForm.wdcTrkId = this.dialogForm.trkNo

          this.dialogForm.wdcTime = this.formmate(this.dialogForm.wdcTime)
          //新增
          addAttendancecar(this.dialogForm).then(res => {
            if (res.success === '1') {
              this.$message({
                type: 'success',
                message: '新增数据成功',
                showClose: true
              })
              this.close()
            }
          })

        }
      })
    },
    //编辑
    editsave() {
      if (Object.keys(this.currentData).length === 0) {
        this.$alert('请选择需要保存的数据', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      if(Object.keys(this.typeId).length === 0){
        addOrEditTmAttendancecar(this.currentData).then(res => {

          if (res.msg === '该车辆已出勤') {
            this.$message.error(res.msg)
            this.search()
            this.close()
          }

          if (res.msg === 'OK') {
            this.$message.success("保存成功！")
            this.close()
          }
          
        })
      }else{
        let box = Object.assign(this.currentData,{wdcDvrId:this.typeId})
        box.check=1
          addOrEditTmAttendancecar(box).then(res => {
          if (res.msg === 'OK') {
            this.$message.success("保存成功！")
            this.close()
          }
          if (res.msg === '该车辆已出勤') {
            this.$message.error(res.msg)
            this.search()
            this.close()
          }
        })
      }
    

    },
    //新增
    add() {
      this.selectAllTrucks()
      this.openDialog = true
      this.see = false
      this.edit = false
      this.name = '新增信息'
      let date = new Date()
      this.dialogForm = {
        wdcTime: date,
        trkNo: '',
        swdcDvrId: '',
        wdcRemark: '',
        trkTonnage:''

      }
    },
    //全部发布
    all2() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.form.wdcTime = this.formmate(this.form.wdcTime)
          addAllTmAttendancecar({wdcTime: this.form.wdcTime,wdcTrks:this.truckNos2}).then(res => {
            if (res.success === '1') {
              this.openDialog2 = false
              this.$confirm('运力发布成功！', '提示', {
                confirmButtonText: '确定'
              }).then(() =>{
                this.getList()
                this.selectAllTrucks()
              })
            }
          })
         
        } else {
          this.$alert('请选择发布日期', '提示', {
            confirmButtonText: '确定'
          })
        }
      })
      this.getdatatime()
     // this.refreshList()
      
    },
    //全部发布
    all() {
      this.selectAllTrucks()
      this.openDialog2=true;
      this.name2 = '运力发布';
      
    },
    //关闭对话框
    close() {
      this.openDialog = false
      this.openDialog2 = false
      this.currentData = {}
      this.refreshList()
      this.tag = ''
    },
    siji(){
      let arr =  this.driver.filter(item =>{
        return item.uuid === this.dialogForm.wdcDvrId;
      })
      this.dialogForm.drvCtctel = arr[0].dvrCtctel
      this.dialogForm.drvIdcard = arr[0].dvrIdcard
    },
    // blur(event){
    //   let arr =  this.carNum.filter(item =>{
    //     return item.uuid === this.dialogForm.trkNo;
    //   })
    //   if(event.target.value != arr[0].trkNo){
    //       this.dialogForm.trkTonnage = []
    //   }
    //   // console.log(event.target.value,8888)
    // },
    cheliang(val){
      let arr =  this.carNum.filter(item =>{
        return item.trkNo === this.dialogForm.trkNo;
      })
      // console.log(arr)
      
      if(Object.keys(arr).length==0){
        this.dialogForm.trkTonnage = ''
        return
      }
      this.dialogForm.trkTonnage = arr[0].trkTonnage     
      //  this.$set(this.dialogFormt,'trkTonnage',arr[0].trkTonnage)
    },
    //调取父组件方法
    clickEventDom(item){
      if(item.mdlCode === 'allF'){
        this.all()
      }else if(item.mdlCode === 'add'){
        this.add()
      }else if(item.mdlCode === 'save'){
        this.editsave()
      }else if(item.mdlCode === 'del'){
        this.del()
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  ::v-deep .el-transfer-panel__item{
    margin-left: 3rem;
  }
  ::v-deep .el-transfer-panel{
    height:330px;
  }
  .driver {
    width: 100%;
    height: 100%;
    padding: 15px 15px 12px;
    display: flex;
    flex-direction: column;

    .form {
      height: 30px;
    }

    .btn {
      height: 50px;
      line-height: 50px;
    }

    .table {
      flex: 1;
    }

    .pages {
      height: 30px;
    }

    .box { //上传对话框
      overflow: hidden;
      height: 200px;

      .selectItem {
        display: inline-block;
        width: 50%;
        height: 100%;
        box-sizing: border-box;
        padding: 20px;
      }

      .upload {
        display: inline-block;
        width: 50%;
        height: 100%;
        box-sizing: border-box;
        padding: 20px;
      }
    }
  }

  // ::v-deep .el-table td{
  //   padding: 2px 0 !important;
  // }

</style>
